<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ip查询</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

</head>
<style>

    body {
	background-color: #5796d4;
    overflow-x: hidden;
}

/* Assets */
.image-wrap {
position:relative;
width:100%;
margin:0 auto;
overflow:hidden;
}
.image-wrap.small .background{
background:url(http://www.blawsolutions.com/img/background.jpg) no-repeat;
background-size:cover;
width:100%;
height:650px;
position:relative;
}
.image-wrap.small .bulb1{
background:url(http://www.blawsolutions.com/img/bulb-1.png) no-repeat center center;
background-size:contain;
position:absolute;
width:272px;
height:412px;
left:42%;
top:0%;
z-index: 3;
animation: pendulum 10s infinite cubic-bezier(0.310, 0.440, 0.445, 1.650);
 -webkit-animation: pendulum 10s infinite cubic-bezier(0.310, 0.440, 0.445, 1.650);
    -moz-animation: pendulum 10s infinite cubic-bezier(0.310, 0.440, 0.445, 1.650);
      -o-animation: pendulum 10s infinite cubic-bezier(0.310, 0.440, 0.445, 1.650);
transform-origin:center top;
}

.image-wrap.small .bulb2{
background:url(http://www.blawsolutions.com/img/bulb-2.1.png) no-repeat center center;
background-size:contain;
position:absolute;
 z-index: 1;
width:144px;
height:418px;
left:36%;
top:21%;
z-index: 2;
animation: pendulum 9s infinite cubic-bezier(0.310, 0.440, 0.445, 1.650);
   -webkit-animation: pendulum 9s infinite cubic-bezier(0.310, 0.440, 0.445, 1.650);
      -moz-animation: pendulum 9s infinite cubic-bezier(0.310, 0.440, 0.445, 1.650);
        -o-animation: pendulum 9s infinite cubic-bezier(0.310, 0.440, 0.445, 1.650);
  transform-origin:center top;
}
.image-wrap.small .bulb3{
background:url(http://www.blawsolutions.com/img/bulb-3.png) no-repeat center center;
background-size:contain;
position:absolute;
width:72px;
height:309px;
left:32%;
top:266px;
z-index: 1;
animation: pendulum 10s infinite cubic-bezier(0.310, 0.440, 0.445, 1.650);
-webkit-animation: pendulum 10s infinite cubic-bezier(0.310, 0.440, 0.445, 1.650);
   -moz-animation: pendulum 10s infinite cubic-bezier(0.310, 0.440, 0.445, 1.650);
     -o-animation: pendulum 10s infinite cubic-bezier(0.310, 0.440, 0.445, 1.650);
transform-origin:center top;
}

/* Keyframes */
@-webkit-keyframes
pendulum {
    0%, 100% { transform: rotate(2deg); }
    25%, 75% { transform: rotate(-4deg); }
    50% { transform: rotate(4deg); }
}

pendulum1 {
    0%, 100% { transform: rotate(.6deg); }
    25%, 75% { transform: rotate(-1.2deg); }
    50% { transform: rotate(1.2deg); }

}
@keyframes pendulum {
    0%, 100% { transform: rotate(2deg); }
    25%, 75% { transform: rotate(-4deg); }
    50% { transform: rotate(4deg); }

}
pendulum1 {
    0%, 100% { transform: rotate(.6deg); }
    25%, 75% { transform: rotate(-1.2deg); }
    50% { transform: rotate(1.2deg); }

}


    .project {
        margin: 0 auto;
        padding-top: 10px;
    }

    .project .a2222 {
        height: 366px;
    }

    .a1 {
        padding-left: 500px;
        padding-bottom: 10px;
    }

    .bt{
        margin: 0 auto;
        padding-top: 150px;
        padding-left:680px;
    }
    .btn{
        margin-left: 490px;
        margin-top: -85px;

    }
    .aa3{
        /*margin-left: 20px;*/
        margin-top: 20px;
        height: 200px;
    }
</style>

<body>

<div class="bt"><h2>IP地址查询</h2></div>


<div class="container">
    <div class="row project">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <div class="thumbnail a2222">
                    <div class="a1"><a href="/logout">注销</a>
                    </div>
                    <div class="cx">
                        <form>
                            <div class="form-group">
                                <input type="text" class="form-control"  placeholder="请输入您的ip地址"name="name">
                            </div>
                            <button type="submit" class="btn btn-primary">登录</button>
                        </form>
                    </div>
                    <div class="thumbnail aa3"><h3>{{msg}}</h3>
                        <h3>{{jg}}</h3></div>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="image-wrap small">
  <div class="background"></div>
  <div class="bulb1"></div>
  <div class="bulb2"></div>
  <div class="bulb3"></div>
</div>


</body>
</html>